<template>
	<view>
<!-- 		<uni-nav-bar 
			title="陕西健康科普资源库" 
			backgroundColor="#27A280" 
			color="white"
			:shadow="false"
			:border="false"/> -->
		<view class="top-view">
			<view class="search-view">
					<view class="left-view">
						<uni-icons type="search" size="25" color="#CCCCCC"></uni-icons>
						<input placeholder="专家、知识、视频"/>
					</view>
					<view class="right-view">搜索</view>
			</view>
			<view class="advanced-search-btn">高级搜索</view>
		</view>
		
		<view class="grid-menu-view">
			<uni-grid :column="4" :showBorder="false"  :square="false" :highlight="false">
				<uni-grid-item v-for="item in gridMenuList">
					<view class="grid-item">
						<view 
						class="icon-view" 
							:style="{...getGridMenuBackground(item.bgColorTop,item.bgColorBottom)}">
							<uni-icons :type="item.icon" size="30" color="white"></uni-icons>
						</view>
						<text class="text">{{item.title}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">头条资讯</view>
				<view class="more-btn">更多内容》</view>
			</view>
			<uni-list>
					<uni-list-item v-for="i in 3">
							<template v-slot:header>
									<view class="news-thumb">
										<image src="/static/logo.png" mode="aspectFill"/>
									</view>
							</template>
							<template v-slot:body>
								<view class="news-list-body">
									<view class="title">糖尿病的影响</view>
									<view class="note">体重下降较快，严重时会明显消瘦....</view>
								</view>
							</template>
					</uni-list-item>
			</uni-list>
		</view>
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">健康陕西</view>
				<view class="more-btn">更多内容》</view>
			</view>
			<uni-grid :showBorder="false" :highlight="false" :column="2">
				<uni-grid-item v-for="i in 2">
					<view class="grid-news-item">
						<view class="grid-news-thumb">
							<image src="/static/logo.png" mode="aspectFill"/>
						</view>
						<view class="title">秋季常见儿科问题</view>
						<view class="date-view">
							<view class="date-text">2023-08-17</view>
							<view class="reading-num-view">
								<uni-icons type="eye-filled"/>
								<view>23</view>
								<uni-icons type="star-filled"/>
								<view>23</view>
							</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">百姓健康系列栏目</view>
				<view class="more-btn">更多内容》</view>
			</view>
			
			
			<view class="card-view">
				<view class="card-title">
					<view class="title">电视节目</view>
					<!-- <view class="more-btn">更多内容》</view> -->
				</view>
				<uni-grid :showBorder="false" :highlight="false" :column="2">
					<uni-grid-item v-for="i in 2">
						<view class="grid-news-item">
							<view class="grid-news-thumb">
								<image src="/static/logo.png" mode="aspectFill"/>
							</view>
							<view class="title">秋季常见儿科问题</view>
							<view class="date-view">
								<view class="date-text">2023-08-17</view>
								<view class="reading-num-view">
									<uni-icons type="eye-filled"/>
									<view>23</view>
									<uni-icons type="star-filled"/>
									<view>23</view>
								</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			
		</view>

		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">报纸专刊</view>
				<!-- <view class="more-btn">更多内容》</view> -->
			</view>
			<view class="newspaper-view">
				<view class="newspaper-item">
					<view class="newspaper-thumb">
						<image src="/static/logo.png" mode="aspectFill"/>
					</view>
					<view class="title">陕西日报</view>
					<view class="date-view">
						<view class="date-text">2023-08-17</view>
					</view>
				</view>
				<view class="newspaper-item">
					<view class="newspaper-thumb">
						<image src="/static/logo.png" mode="aspectFill"/>
					</view>
					<view class="title">陕西老年报</view>
					<view class="date-view">
						<view class="date-text">2023-08-17</view>
					</view>
				</view>
				<view class="newspaper-item">
					<view class="newspaper-thumb">
						<image src="/static/logo.png" mode="aspectFill"/>
					</view>
					<view class="title">专刊</view>
					<view class="date-view">
						<view class="date-text">2023-08-17</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">广播</view>
				<!-- <view class="more-btn">更多内容》</view> -->
			</view>
			<view class="text-grid-view">
				<view v-for="i in 6" class="text-grid-item">文明聚餐 健康共享</view>
			</view>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">新媒体</view>
				<!-- <view class="more-btn">更多内容》</view> -->
			</view>
			<view class="new-media-view">
				<view class="new-media-item">
					<image src="/static/logo.png" mode="widthFix"/>
					<view>微信公众号</view>
				</view>
				<view class="new-media-item">
					<image src="/static/logo.png" mode="widthFix"/>
					<view>抖音视频号</view>
				</view>
				<view class="new-media-item">
					<image src="/static/logo.png" mode="widthFix"/>
					<view>微信视频号</view>
				</view>
			</view>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">健康知识</view>
				<view class="more-btn">更多内容》</view>
			</view>
			<v-tabs
				:bold="false"
				color="#AAAAAA"
				activeColor="#F69A23"
				lineHeight="0"
				activeFontSize="28rpx"
				fontSize="28rpx"
				:zIndex="0"
				v-model="healthKnowledgeTabCurrent" 
				:tabs="healthKnowledgeTabs"
				@change="changeHealthKnowledgeTab">
				</v-tabs>
<!-- 				<v-tabs
					ref="healthKnowledgeSubTab"
					pills
					:bold="false"
					color="#AAAAAA"
					activeColor="#27A280"
					pillsColor="#DAF9FF"
					pillsBorderRadius="0"
					lineHeight="0"
					activeFontSize="16rpx"
					fontSize="16rpx"
					:zIndex="0"
					v-model="healthKnowledgeSubTabCurrent" 
					:tabs="healthKnowledgeSubTabs" 
					@change="changeHealthKnowledgeSubTab">
					</v-tabs> -->
					<scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="subTabScrollLeft">
						<view
							@click="changeHealthKnowledgeSubTab(index)"
							class="sub-tab-item"
							:class="healthKnowledgeSubTabCurrent === index ? 'sub-tab-item-selected' : ''"
							v-for="(item,index) in healthKnowledgeSubTabs">
							{{item}}
						</view>
					</scroll-view>

			<uni-list>
					<uni-list-item v-for="i in 3">
							<template v-slot:header>
									<view class="news-thumb">
										<image src="/static/logo.png" mode="aspectFill"/>
									</view>
							</template>
							<template v-slot:body>
								<view class="news-list-body">
									<view class="title">糖尿病的影响</view>
									<view class="note">体重下降较快，严重时会明显消瘦....</view>
								</view>
							</template>
					</uni-list-item>
			</uni-list>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">科普资料</view>
				<view class="more-btn">更多内容》</view>
			</view>
			<v-tabs
				:bold="false"
				color="#AAAAAA"
				activeColor="#F69A23"
				lineHeight="0"
				activeFontSize="28rpx"
				fontSize="28rpx"
				:zIndex="0"
				v-model="popularScienceTabCurrent" 
				:tabs="popularScienceTabTabs"
				@change="changePopularScienceTab">
				</v-tabs>
				<view class="grid-popular-science-view">
					<view class="grid-popular-science-item" v-for="i in 2">
						<view class="grid-popular-science-thumb">
							<image src="/static/logo.png" mode="aspectFill"/>
						</view>
						<view class="title">秋季常见儿科问题</view>
						<view class="date-view">
							<view class="date-text">2023-08-17</view>
							<view class="reading-num-view">
								<uni-icons type="eye-filled"/>
								<view>23</view>
								<uni-icons type="star-filled"/>
								<view>23</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		
		
		<view class="card-view">
			<view class="card-title">
				<view class="title">健康活动</view>
				<view class="more-btn">更多内容》</view>
			</view>
			<view class="health-activity-view">
				<view class="health-activity-item img-view">
					<image src="/static/logo.png" mode="aspectFill"/>
					<view class="filter-view"></view>
					<view class="title-text">糖尿病宣传日</view>
				</view>
				<view class="health-activity-item img-view">
					<image src="/static/logo.png" mode="aspectFill"/>
					<view class="filter-view"></view>
					<view class="title-text">高血压宣传日</view>
				</view>
				<view class="health-activity-item item-last item-last-view">
					<view class="title-view">
						<uni-icons type="videocam" size="30" color="white"></uni-icons>
						<view>直播</view>
					</view>
					<view class="image-view">
						<image src="/static/logo.png" mode="aspectFill"/>
					</view>
					<view class="bottom-title-view">
						<view class="title-text">秋季常见儿科问题</view>
						<view class="status-text">已结束</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view style="height: 10rpx;"></view>
		

		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridMenuList:[
					{
						bgColorTop:'#ADFFE8',
						bgColorBottom:'#259A7A',
						title:'头条资讯',
						icon:'star-filled'
					},
					{
						bgColorTop:'#FFD9BB',
						bgColorBottom:'#FF8A32',
						title:'健康陕西',
						icon:'heart-filled'
					},
					{
						bgColorTop:'#ADFFE8',
						bgColorBottom:'#259A7A',
						title:'百姓健康\n系列栏目',
						icon:'plusempty'
					},
					{
						bgColorTop:'#FFC9C2',
						bgColorBottom:'#EF6550',
						title:'科普知识',
						icon:'wallet-filled'
					},
					{
						bgColorTop:'#FFDDC0',
						bgColorBottom:'#F87B13',
						title:'科普资料',
						icon:'folder-add-filled'
					},
					{
						bgColorTop:'#CFDEFA',
						bgColorBottom:'#5B89E5',
						title:'健康活动',
						icon:'personadd-filled'
					},
					{
						bgColorTop:'#CFDEFA',
						bgColorBottom:'#5B89E5',
						title:'直播',
						icon:'videocam'
					}
				],
				healthKnowledgeTabCurrent: 0,
				healthKnowledgeTabs: ['健康素养', '公共卫生', '疾病常识', '妇幼保健','慢病防治', '心理健康', '中医养生', '公共安全'],
				healthKnowledgeSubTabCurrent: 0,
				healthKnowledgeSubTabs: ['健康知识', '合理膳食', '适量行动', '戒烟戒酒', '健康技能', '其他'],
				popularScienceTabCurrent:0,
				popularScienceTabTabs:['海报','折页','展板','手册','视频','音频','宣传','课件','稿件','杂志'],
				subTabScrollLeft:0,
			}
		},
		methods: {
			getGridMenuBackground(colorTop,colorBottom){
				return {
					background: `linear-gradient(to bottom,${colorTop},${colorBottom})`
				}
			},
			changeHealthKnowledgeTab(e){
				this.healthKnowledgeTabCurrent = e
				this.healthKnowledgeSubTabCurrent = 0
				const tabs = [
					['健康知识', '合理膳食', '适量行动', '戒烟戒酒', '健康技能', '其他'],
					['新冠肺炎', '传染病预防', '预防接种', '地方病预防', '职业健康', '环境健康', '其他'],
					['呼吸系统疾病', '循环系统疾病', '泌尿系统疾病', '生殖系统疾病', '消化系统疾病', '运动系统疾病', '内分泌系统疾病','神经系统疾病','口腔健康','康复护理','其他'],
					['儿童保健', '妇女保健', '孕产保健', '其他'],
					['高血压', '高血脂', '糖尿病', '脑猝中', '慢阻肺', '哮喘', '其他'],
					['心理疾病', '儿童青少年心理', '婚姻家庭', '社会关系', '老年心理', '其他'],
					['中医知识', '非药物疗法', '情志养生', '时令养生', '起居养生', '运动养生', '饮食养生','其他'],
					['急救知识', '事故灾害', '其他'],
				]
				this.healthKnowledgeSubTabs = tabs[e]
				this.subTabScrollLeft = 0
			},
			changeHealthKnowledgeSubTab(e){
				this.healthKnowledgeSubTabCurrent = e
			},
			changePopularScienceTab(e){
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.top-view{
	width: 100%;
	height: 314rpx;
	background:#27A280;
	display: flex;
	flex-direction: column;
	align-items: center;
	.search-view{
		width: 100%;
		height: 70rpx;
		width: calc(100% - 60rpx);
		border-radius: 44rpx;
		display: flex;
		overflow: hidden;
		gap:10rpx;	
		margin-top: 30rpx;
		.left-view{
			flex: 1;
			width: 100%;
			background: white;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			input{
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 22rpx;
				width: 100%;
			}
			input::placeholder{
				color: #999999;
			}
		}
		.right-view{
			width: 190rpx;
			height: 100%;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			font-size: 32rpx;
		}
	}
	.advanced-search-btn{
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		margin-top: 30rpx;
		border-bottom: solid 1rpx #FFFFFF;
	}
}

.grid-menu-view{
	width: 100%;
	background: white;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	.grid-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}
	.icon-view{
		width: 90rpx;
		height: 90rpx;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.text{
		font-size: 24rpx;
		color: #666;
	}
}

.card-view{
	width: 100%;
	display: flex;
	flex-direction: column;
	background: white;
	margin-top: 8rpx;
	.card-title{
		width: 100%;
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		align-items: center;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #666666;
			flex: 1;
		}
		&::before{
			content: '';
			width: 10rpx;
			height: 47rpx;
			background: #27A280;
			margin-right: 20rpx;
		}
		.more-btn{
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.news-thumb{
	image{
		width: 180rpx;
		height: 135rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
	}
}

.news-list-body{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.title{
		font-weight: bold;
		font-size: 30rpx;
		color: #666666;
	}
	.note{
		font-size: 24rpx;
		color: #999999;
	}
}

.grid-news-thumb{
	width: 100%;
	image{
		width: 100%;
		height: 186rpx;
		border-radius: 16rpx;
	}
}

.grid-news-item{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx;
	box-sizing: border-box;
	.title{
		width: 100%;
		font-size: #666;
		font-size: 30rpx;
		font-weight: bold;
	}
	.date-view{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		.date-text{
			color: #999999;
			flex: 1;
		}
		.reading-num-view{
			display: flex;
			gap:5rpx;
		}
		
	}

}


.newspaper-view{
	display: flex;
	.newspaper-item{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
		
		.newspaper-thumb{
			width: 100%;
			image{
				width: 100%;
				height: 300rpx;
			}
		}
		
		.title{
			width: 100%;
			font-size: #666;
			font-size: 30rpx;
			font-weight: bold;
		}
		.date-view{
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			.date-text{
				color: #999999;
				flex: 1;
			}
			
		}
	
	}
}

.text-grid-view{
	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	.text-grid-item{
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		border-bottom: solid 1rpx #F9FAFA;
		color: #CDCDCD;
		&::before{
			content: '▸';
			margin-right: 10rpx;
		}
	}
}


.new-media-view{
	width: 100%;
	padding: 30rpx;
	display: flex;
	box-sizing: border-box;
	gap:10rpx;
	.new-media-item{
		width: 100%;
		height: 300rpx;
		border: solid 1rpx #999999;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 8rpx;
		image{
			width: 100%;
		}
		view{
			margin-top: 30rpx;
		}
	}
}

.grid-popular-science-view{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit,calc(100% / 2));
	.grid-popular-science-item{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		.grid-popular-science-thumb{
			width: 100%;
			image{
				width: 100%;
				height: 400rpx;
			}
		}
		.title{
			width: 100%;
			font-size: #666;
			font-size: 30rpx;
			font-weight: bold;
		}
		.date-view{
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			.date-text{
				color: #999999;
				flex: 1;
			}
			.reading-num-view{
				display: flex;
				gap:5rpx;
			}
			
		}
	}
}


.health-activity-view{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit,calc(100% / 2 - 10rpx));
	padding: 30rpx;
	box-sizing: border-box;
	grid-gap: 30rpx;
	.health-activity-item{
		width: 100%;
		height: 160rpx;
		border-radius: 32rpx;
		overflow: hidden;
	}
	.item-last{
		height: 350rpx;
		grid-row: 1 / span 3;
		grid-column: 2 / 3;
		background: white;
	}
	.img-view{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.filter-view{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.4);
		}
		.title-text{
			position: absolute;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}
		
	}
	
	.item-last-view{
		width: 100%;
		display: flex;
		flex-direction: column;
		box-shadow: 5rpx 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.16);
		.title-view{
			width: 100%;
			height: 76rpx;
			background: linear-gradient(to bottom,#27A280,#FFFFFF);
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			box-sizing: border-box;
			gap:10rpx;
			view{
				color: white;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
		.image-view{
			width: 100%;
			height: 163rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.bottom-title-view{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			.title-text{
				font-size: 24rpx;
				font-weight: bold;
				color: #666666;
			}
			.status-text{
				font-size: 22rpx;
				color: #999999;
				background: #FAFAFA;
				padding: 10rpx;
			}
		}
	}
	
	
}


.scroll-view_H{
	white-space: nowrap;
	width: 100%;
	margin-bottom: 10rpx;
	/deep/::-webkit-scrollbar {
			 display: none;
			 width: 0;
			 height: 0;
	} 
}
.sub-tab-item{
	display: inline-block;
	line-height: 48rpx;
	height: 48rpx;
	background: #FAFAFA;
	padding-left: 22rpx;
	padding-right: 22rpx;
	border-radius: 10rpx;
	color: #CCCCCC;
	margin-left: 20rpx;
}

.sub-tab-item-selected{
	background: #DAFCF6;
	color: #27A280;
}

</style>
